<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>向班级添加课程 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* Add some styles as needed */
        .search-form {
            margin-bottom: 20px;
        }
        .search-form input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-right: 10px;
        }
        .search-results table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #fff; /* Table background color */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Table shadow */
            border-radius: 8px; /* Table rounded corners */
            overflow: hidden; /* Hide overflow content, for rounded corners */
        }
        .search-results th, .search-results td {
            border: 1px solid #ddd;
            padding: 12px; /* Adjust padding */
            text-align: left;
        }
        .search-results th {
            background-color: #f2f2f2;
            font-weight: bold;
            color: #333;
        }
        .search-results tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .search-results tr:hover {
            background-color: #e9e9e9;
        }
        .actions-column a, .actions-column button {
            margin-right: 5px;
        }
        .no-results-message {
            text-align: center;
            margin-top: 30px;
            font-size: 1.2em;
            color: #666;
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: common-header}"></div>

<div class="main-content">
    <div class="container">
        <h1 class="page-title">向班级添加课程 (班级ID: <span th:text="${classId}">班级ID占位符</span>)</h1>

        <div th:if="${successMessage}" class="alert alert-success">
            <p th:text="${successMessage}"></p>
        </div>
        <div th:if="${errorMessage}" class="alert alert-danger">
            <p th:text="${errorMessage}"></p>
        </div>

        <div class="search-form">
            <form th:action="@{/class/{classId}/add-course-to-class(classId=${classId})}" method="get">
                <input type="text" name="searchName" th:value="${searchName}" placeholder="输入课程名称搜索">
                <button type="submit" class="btn btn-primary">搜索课程</button>
            </form>
        </div>

        <div class="search-results">
            <h2 style="margin-bottom: 15px;">搜索结果</h2>
            <div th:if="${courses != null and !#lists.isEmpty(courses)}">
                <table>
                    <thead>
                    <tr>
                        <th>课程ID</th>
                        <th>课程名称</th>
                        <th>课程介绍</th>
                        <th>章节数</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="course : ${courses}">
                        <td th:text="${course.id}">课程ID占位符</td>
                        <td th:text="${course.couName}">课程名称占位符</td>
                        <td th:text="${course.couIntroduction}">课程介绍占位符</td>
                        <td th:text="${course.couCataNum}">章节数占位符</td>
                        <td class="actions-column">
                            <form th:action="@{/class/{classId}/add-course-to-class(classId=${classId})}" method="post" style="display: inline;">
                                <input type="hidden" name="courseId" th:value="${course.id}" />
                                <button type="submit" class="btn btn-success btn-sm">添加</button>
                            </form>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div th:if="${courses != null and #lists.isEmpty(courses)}" class="no-results-message">
                <p>没有找到匹配的课程。</p>
            </div>
            <div th:if="${courses == null}" class="no-results-message">
                <p>请输入课程名称进行搜索，或查看所有课程。</p>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <a th:href="@{/class/{classId}/courses/manage(classId=${classId})}" class="btn btn-secondary">返回班级课程管理</a>
        </div>
    </div>
</div>
</body>
</html>